<template>
  <div>
    <div class="finance">
      <div class="padding-left-20 padding-top-20">
        <span class="font-size-18 font-weight-700">财务表现</span>
        <span class="font-size-14 t-center">（近10年资产估值）</span>
      </div>
      <div class="flex">
        <div class="flex-1" style="height: 320px">
          <bar ref="realFinance" :ch-config="chConfig.realFinance"></bar>
        </div>

        <div class="income-box margin-top-30 margin-left-right-20">
          <div class="income-item" :class="borderClass(index)" v-for="(item, index) in financeInfor" :key="index">
            <div class="font-size-26 padding-top-bottom-20">{{ item.money | fmoneyThousand }}</div>
            <div class="font-size-14 color-666666 padding-bottom-20">{{ item.desc }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="capital">
      <div class="chart-vessel flex-column flex-1">
        <div class="font-size-18 font-weight-700 padding-left-20 padding-top-20">未来五年净现金流预测 <span>（万元）</span></div>
        <div class="flex-1">
          <bar ref="realForecast" :ch-config="chConfig.realForecast"></bar>
        </div>
      </div>
      <div class="split-line"></div>
      <div class="chart-vessel flex-column flex-1">
        <div class="font-size-18 font-weight-700 padding-left-20 padding-top-20">租金复合年均增长</div>
        <div class="flex-1">
          <my-line ref="realIncrease" :ch-config="chConfig.realIncrease"></my-line>
        </div>
      </div>
      <div class="split-line"></div>
      <div class="chart-vessel flex-column flex-1">
        <div class="font-size-18 font-weight-700 padding-left-20 padding-top-20">投资回报率</div>
        <div class="flex-1">
          <my-line ref="realRate" :ch-config="chConfig.realRate"></my-line>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Bar from '@c/echarts/bar';
  import MyLine from '@c/echarts/line';
  import * as echartsConfig from '@js/echartsConfig';
  export default {
    components: {
      MyLine,
      Bar,
    },
    props: {
      companyInfo: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    data() {
      return {
        list: [],
        chConfig: {
          realFinance: echartsConfig.barMapFinanceConfig,
          realForecast: JSON.parse(JSON.stringify(echartsConfig.barConfig)),
          realIncrease: JSON.parse(JSON.stringify(echartsConfig.lineConfig)),
          realRate: JSON.parse(JSON.stringify(echartsConfig.lineConfig)),
        },
        financeInfor: [
          {
            money: '201,288',
            desc: '毛收入(万元)',
          },
          {
            money: '134,863',
            desc: '净运营收入(万元)',
          },
          {
            money: '2,697,259',
            desc: '总体估值(万元)',
          },
          {
            money: '5%',
            desc: '资本化率',
          },
        ],
      };
    },
    created() {
      this.initConfig();
      this.initData();
    },
    methods: {
      initData() {
        this.chConfig.realFinance.legend.left = 15;
        this.chConfig.realFinance.xAxisData = ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021'];
        this.chConfig.realFinance.list[0].data = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
        this.chConfig.realFinance.list[1].data = [5, 5, 5, 5, 5, 5, 5, 5, 5, 5];
        this.chConfig.realFinance.list[2].data = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
        this.chConfig.realFinance.dataZoom = false;

        this.chConfig.realForecast.xAxisData = ['2022', '2023', '2024', '2025', '2026'];
        this.chConfig.realForecast.list[0].data = [10, 20, 30, 40, 50];
        this.chConfig.realForecast.dataZoom = false;

        this.chConfig.realIncrease.xAxis.xAxisData = ['2022', '2023', '2024', '2025', '2026'];
        this.chConfig.realIncrease.list[0].data = [10, 20, 30, 40, 50];

        this.chConfig.realRate.xAxis.xAxisData = ['2022', '2023', '2024', '2025', '2026'];
        this.chConfig.realRate.list[0].data = [10, 20, 30, 40, 50];

        //初始化echart
        this.$nextTick(() => {
          this.$refs.realFinance.initChart();
          this.$refs.realForecast.initChart();
          this.$refs.realIncrease.initChart();
          this.$refs.realRate.initChart();
        });
      },

      initConfig() {
        this.chConfig.realForecast.list[0].label.formatter = '{c}';
        this.chConfig.realForecast.yAxis.grainUnit = '';
        this.chConfig.realForecast.yAxis.show = false;
        this.chConfig.realIncrease.yAxis.show = false;
        this.chConfig.realRate.yAxis.show = false;
      },

      //边框calss
      borderClass(index) {
        if (index == 0) {
          return 'border-first';
        } else if (index == 1) {
          return 'border-second';
        } else if (index == 2) {
          return 'border-third';
        }
      }
    },
  };
</script>
<style scoped lang="scss">
  .finance {
    background: #fff;
    color: #333;
    padding-bottom: 20px;
    .income-box {
      width: 500px;
      height: 250px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .income-item {
      flex: 1;
      width: 50%;
      min-width: 50%;
      max-width: 50%;
      text-align: center;
    }
  }
  .capital {
    width: 100%;
    overflow: hidden;
    display: flex;
    margin-top: 10px;
    flex-wrap: wrap;
    .chart-vessel {
      height: 400px;
      background: #fff;
    }
    .split-line {
      width: 10px;
      background: #f8f8f8;
    }
  }
  .border-first {
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
  }
  .border-second {
    border-bottom: 1px solid #e5e5e5;
  }
  .border-third {
    border-right: 1px solid #e5e5e5;
  }
</style>
